<template>
  <div class="home">
    <el-card title="工作台" :bordered="false" class="card">
      <template #header>
        <div v-if="time" class="now-time">
          <p class="now-time__time gi_line_1">{{ time }}</p>
        </div>
      </template>
      <el-row wrap :gutter="16" class="content">
        <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16" :xxl="18">
          <el-space alignment="center" size="default">
            <el-avatar :size="68">
              <img :src="userStore.avatar" alt="avatar"/>
            </el-avatar>
            <div class="welcome">
              <el-text class="mx-1 hello" size="large">{{ goodTimeText() }}！{{ userStore.nickName }}</el-text>
              <p class="hello"></p>
              <el-text class="mx-1" type="info">北海虽赊，扶摇可接；东隅已逝，桑榆非晚。</el-text>
            </div>
          </el-space>
        </el-col>
      </el-row>
    </el-card>
    <el-card title="快捷操作" :bordered="false" size="medium" class="card gi_card_title">
      <template #header>
        <div class="card-header">
          <span>快捷操作</span>
        </div>
      </template>
      <el-row>
        <el-col v-for="(item, index) in list" :key="item.name" class="card-grid-item" :span="6">
          <el-card v-hasPermi="[item.perms]" class="box-card" shadow="never" :body-style="{ padding: '0px' }">
            <el-space direction="vertical" class="wrapper" @click="router.replace({ path: item.path })">
              <svg-icon class="icon" :icon-class="item.icon" :size="30"/>
              <el-text class="text">{{ item.name }}</el-text>
            </el-space>
          </el-card>
        </el-col>
      </el-row>

    </el-card>


  </div>
</template>

<script setup name="Index">
import TextLink from '@/BaseComponent/TextLink'
import CodeInfo from '@/BaseComponent/Code'
import Dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import {goodTimeText} from "@/utils/ruoyi.js";

const userStore = useUserStore()
const time = ref('')

console.log('userStore', userStore.nickName)

// 获取现在时间
const getFormatNowTime = () => {
  const weekList = ['日', '一', '二', '三', '四', '五', '六']
  return `${Dayjs(new Date()).format('YYYY年MM月DD日 HH:mm:ss')} 星期${weekList[Dayjs(new Date()).day()]}`
}

// 初始化时间
const initTime = () => {
  time.value = getFormatNowTime()
  setInterval(() => {
    time.value = getFormatNowTime()
  }, 1000)
}

initTime()

const router = useRouter()

const list = [
  {name: '邮件导入', icon: 'el-icon-UploadFilled', path: '/email/history/import', perms: 'email:history:list'},
  {name: '邮件明细', icon: 'el-icon-Message', path: '/email/send/item', perms: 'email:item:list'},
  {name: '邮箱配置', icon: 'el-icon-Menu', path: '/email/sender/config', perms: 'email:sender:list'},

  {name: '用户管理', icon: 'user', path: '/system/user', perms: 'system:user:list'},
  {name: '角色管理', icon: 'peoples', path: '/system/role', perms: 'system:role:list'},
  {name: '菜单管理', icon: 'tree-table', path: '/system/menu', perms: 'system:menu:list'},
  {name: '部门管理', icon: 'tree', path: '/system/dept', perms: 'system:dept:list'},
  {name: '岗位管理', icon: 'post', path: '/system/post', perms: 'system:post:list'},
  {name: '操作日志', icon: 'form', path: '/monitor/operlog', perms: 'monitor:operlog:list'},
]

</script>

<style scoped lang="scss">

@import url('@/assets/fonts/font.css');

.now-time {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: DINPro-Medium;
  color: var(--color-text-1);

  &__time {
    margin-left: 6px;
  }
}

.card {
  .content {
    padding: 8px 20px;

    .welcome {
      margin: 8px 0;

      .hello {
        font-size: 1.25rem;
        margin-bottom: 10px;
      }
    }
  }

  .el-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .el-row .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }


  overflow: hidden;

  .card-grid-item {
    cursor: pointer;

    .box-card {
      margin: 0;
      border: 1px solid #f0f1f4;
      border-radius: 0;

      display: flex;
      justify-content: center;
      align-items: center;

      .wrapper {
        margin: 15px 0;
      }
    }
  }


  :deep(.icon) {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    color: rgb(var(--gray-8));
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
  }
}


.card {
  :deep(.el-card) {
    margin-bottom: 15px;
  }

  margin: var(--ba-main-space) var(--ba-main-space) 0 var(--ba-main-space);
}

.description {
  margin-bottom: 20px;
}

</style>
